<template>
	<view class="person-container">
		<navBar :title='title'></navBar>
		<view class="person-info">
			<view class="info-main">
				<view class="main-item"
				 v-for="(item, index) in form.formLabel"
				 :key="index">
					<view class="item-label">{{ item.label }}</view>
					<view class="item-type">
						<view class="type-img" v-if="item.type === 'upload'" >
							<!-- <image v-if="form.formData.avatarFileId" :src="httpUrl+'/app/file/viewFile?fileId='+form.formData.avatarFileId" ></image> -->
							<image :src="httpUrl+'/app/file/viewFile?fileId='+uid" ></image>
						</view>
						<uni-easyinput :disabled="item.disabled" v-model="form.formData[item.prop]" :type='item.types' :clearable="false" v-if="item.type === 'input'" :placeholder=" '请输入' + item.label"></uni-easyinput>
						<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'picker'" :value="item.selectIndex" mode="selector" range-key="name" :range="item.range" @change="bindPickerChange">
							<view>{{  item.range && item.range[item.selectIndex] ? item.range[item.selectIndex].name : '请选择'}}</view>
						</picker>	
							<picker disabled="true" style="width: 100%;height: 40rpx;" v-if="item.type === 'pickers'" :value="item.selectIndex" mode="selector" range-key="name" :range="item.range" @change="bindPickerSex">
							<view>{{  item.range && item.range[item.selectIndex] ? item.range[item.selectIndex].name : '请选择'}}</view>
						</picker>	
						<image src="@/static/img/common/arrr.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button class="btns" @click="save">保存</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'	
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/navBar.vue';
import { showToast } from '@/utils/toast';
import api from '@/utils/api/recruit.js'
	import { setDialogView } from '@/utils/dialogView.ts'
const title = ref('个人信息')
const uid = uni.getStorageSync('avatarId')
onLoad(res=> {
	if(res.data){
		let obj = JSON.parse(res.data)
		console.log(obj);
		if(obj.name){
			let sexIndex = form.formLabel[2].range.findIndex(item=>item.value == obj.sex)
			form.formLabel[2].selectIndex = sexIndex
			let xlIndex = form.formLabel[5].range.findIndex(item=>item.value == obj.education)
			form.formLabel[5].selectIndex = xlIndex
			form.formData = obj
			// form.formData.nickname = obj.name
		}
		form.formData.avatarFileId = obj.avatarFileId ? obj.avatarFileId : uid
		form.formData.nickname = obj.name
		
	}
})

const form = reactive({
	formLabel: [
		{ label: '头像', prop: 'avatarFileId', type: 'upload' },
		{ label: '姓名', prop: 'nickname', type: 'input', types: 'text', disabled: true },
		{ label: '性别', prop: 'sex', type: 'pickers', range: [{ name: '男', value: 'MALE' }, { name: '女', value: 'FEMALE' }], selectIndex: '' },
		{ label: '生日', prop: 'birthday', type: 'input', types: 'text', disabled: true },
		{ label: '电话', prop: 'linkPhone', type: 'input', types: 'number', disabled: true },
		{ label: '学历', prop: 'education', type: 'picker', range: [
			{name: '不限', value: 'NONE'}, {name: '小学', value: 'PRIMARY_SCHOOL'}, {name: '初中', value: 'JUNIOR_HIGH_SCHOOL'},
			{name: '高中/中专/技校', value: 'HIGH_SCHOOL'}, {name: '大专', value: 'JUNIOR_COLLEGE'},
			{name: '本科', value: 'UNDERGRADUATE'}, {name: '研究生', value: 'GRADUATE_STUDENT'},
			{name: '博士', value: 'DOCTOR'}, {name: '教授/专家', value: 'PROFESSOR'},
			] , selectIndex: '' },
	],
	formData: {}
})
// 学历选择
const bindPickerChange = e => {
	let index = e.detail.value
	form.formLabel[5].selectIndex = index
	form.formData.education = form.formLabel[5].range[index].value
}
// 性别选择
const bindPickerSex= e => {
	let index = e.detail.value
	form.formLabel[2].selectIndex = index
	form.formData.sex = form.formLabel[2].range[index].value
}
// 保存
const save = async _ => {
	const phoneRegex = /^1[3-9]\d{9}$/;
	if(!form.formData.linkPhone){
		return showToast('请输入手机号')
	}
	if(!phoneRegex.test(form.formData.linkPhone)){
		return showToast('请输入有效手机号')
	}
	if(!form.formData.nickname){
		return showToast('请输入姓名')
	}
	if(!form.formData.sex){
		return showToast('请选择性别')
	}
	if(!form.formData.education){
		return showToast('请选择学历')
	}
	let data = {
		saveType: 'PERSONAL_DATA',
		appUserResume: form.formData
	}
	const res = await api.saveUserResume(data)
	if(res.code === 200) {
		showToast(res.msg)
		uni.$emit('refsh')
		uni.navigateBack()
	}
}
const httpUrl = getApp().globalData.baseUrl
	const chooseImg = () => {
		uni.showActionSheet({
			itemList: ['相册',],
			success: function (res) {
				setDialogView('READ_EXTERNAL_STORAGE').then(res=>{
					if(res == 1){
						uni.chooseImage({
							count: 1,
							sourceType: ["album"],
							success: (chooseImageRes) => {
							    uni.uploadFile({
									url: `${getApp().globalData.baseUrl}/app/file/uploadFile`,
									filePath: chooseImageRes.tempFilePaths[0],
									name: 'file'
								}).then(res=>{
									const fileId=JSON.parse(res.data).data.fileId
									form.formData.avatarFileId = fileId
									showToast('上传成功')
									// setAppUserInfo({data:{user:{avatarId:fileId}}}).then(res=>{
									// 	doQueryUserInfo()
									// 	uni.showToast({
									// 		title: '更新成功',
									// 		icon: 'success'
									// 	})
									// })
								}) 
							},
						});
					}
				})
				
			}
		});
	}				
</script>

<style lang="scss" scoped>
::v-deep .is-input-border{
	border: none !important;
}	
::v-deep .is-disabled{
	background-color: transparent !important;
}
::v-deep .uni-input-input{
	text-align: right;
}
::v-deep .uni-easyinput__placeholder-class{
	text-align: right;
}
.person-container{
	height: 100vh;
	background: #fff;
	.person-info{
		padding: 32rpx;
		box-sizing: border-box;
		.info-main{
			.main-item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
					.item-label{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #262626;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						width: 200rpx;
				}
				.item-type{
					display: flex;
					align-items: center;
					
					.type-img{
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						border: 1rpx solid #ddd;
						flex: 1;
						image{
							width: 96rpx;
							height: 96rpx;
							border-radius: 50%;
						}
					}
					image{
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
			.main-item:not(:first-child){
				padding: 32rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E5E5E5;
				.item-type{
					height: 70rpx;
				}
			}
		}
	}
	.btn{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 180rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		width: 100%;
		display: flex;
		.btns{
			width: 640rpx;
			height: 88rpx;
			background: #6B64D3;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			color: #fff;
		}
	}
}
</style>
